<template>
    <div class="box">
        <el-card class="box-card">
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="上级菜单" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="无上级菜单">
                        <el-option label="无上级菜单" value="shanghai" />
                        <el-option v-show="levelyy == 0 ? false : true" label="权限" value="shanghai1" />
                        <el-option v-show="levelyy == 0 ? false : true" label="商品" value="shanghai2" />
                        <el-option v-show="levelyy == 0 ? false : true" label="订单" value="shanghai3" />
                        <el-option v-show="levelyy == 0 ? false : true" label="营销" value="shanghai4" />
                        <el-option v-show="levelyy == 0 ? false : true" label="其他" value="shanghai5" />
                    </el-select>
                </el-form-item>
                <el-form-item label="前端名称" prop="name1">
                    <el-input :disabled="levelyy == 1 ? false : true" v-model="ruleForm.name1" />
                </el-form-item>
                <el-form-item label="前端图标" prop="name2">
                    <el-input :disabled='levelyy == 1 ? false : true' v-model="ruleForm.name2" />
                </el-form-item>


                <el-form-item label="是否显示" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <template #default="scope">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </template>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="name">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
                <el-form-item>
                    <template #default="scope">
                        <el-button type="primary" @click="hdtijiao(scope.row)">
                            提交
                        </el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from "../../request/api"
import router from '../../router';
import { useRoute } from 'vue-router'
import type { IAdminListItem } from '../../request/QmsAdminConreiller/index'
import type { Ref } from 'vue'
// 添加
// let modalForm = ref({}) as Ref<IAdminListItem>
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    name1: '',
    name2: '',
    sort: '',
    resource: "",
    region: ''
})


let levelyy = ref(1)

// 监听
const route = useRoute()
// console.log(route);
watch(() => route.query.id,
    async (newId) => {
        // 发起请求
        if (route.query.id) {
            console.log(`${newId}`);
            let idtaozhuan = await api.admin.getAdminID(route.query.id)
            // console.log("idtaozhuan", idtaozhuan);
            ruleForm.name = idtaozhuan.title
            ruleForm.name1 = idtaozhuan.name
            ruleForm.name2 = idtaozhuan.icon
            ruleForm.sort = idtaozhuan.sort
            ruleForm.resource = idtaozhuan.hidden
            levelyy = idtaozhuan.level
        }
    },
    { immediate: true }
)

// 提交
let hdtijiao = async (row: IAdminListItem) => {

    await api.admin.adminCreate(row)

}

</script>

<style lang="scss" scoped>
.box {
    margin: 20px;
}
</style>